<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>搜索框输入文字自动提示</title>
    <link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
    <style type="text/css">
        .container {
            padding-top: 150px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="form-inline">
            <div class="form-group">
                <select class="form-control" id="province"></select>
            </div>
            <div class="form-group">
                <select class="form-control" id="city">
					<option>请选择城市</option>
				</select>
            </div>
            <div class="form-group">
                <select class="form-control" id="area">
					<option>请选择县城</option>
				</select>
            </div>
        </div>
    </div>
    <script src="/js/ajax.js"></script>
    <script src="/js/template-web.js"></script>
    <script type="text/html" id="pTpl">
        <option>请选择省份</option>
        {{each province}}
        <option value="{{$value.id}}">{{$value.name}}</option>
        {{/each}}
    </script>
    <script type="text/html" id='cTpl'>
        <option>请选择城市</option>
        {{each city}}
        <option value="{{$value.id}}">{{$value.name}}</option>
        {{/each}}
    </script>
    <script type="text/html" id='aTpl'>
        <option>请选择县城</option>
        {{each area}}
        <option value="{{$value.id}}">{{$value.name}}</option>
        {{/each}}
    </script>
    <script>
        var province = document.getElementById('province')
        var city = document.getElementById('city');
        var area = document.getElementById('area');
        ajax({
            url: 'http://localhost:3000/province',
            success: function(data) {
                var html = template('pTpl', {
                    province: data
                })
                province.innerHTML = html;
            }
        })
        province.onchange = function() {
            var pid = this.value;
            var html = template('aTpl', {
                area: ''
            })
            area.innerHTML = html;
            ajax({
                url: 'http://localhost:3000/cities',
                data: {
                    id: pid
                },
                success: function(data) {
                    var html = template('cTpl', {
                        city: data
                    })
                    city.innerHTML = html;
                }
            })
        }
        city.onchange = function() {
            var aid = this.value;
            ajax({
                url: 'http://localhost:3000/areas',
                data: {
                    id: aid
                },
                success: function(data) {
                    console.log(data)
                    var html = template('aTpl', {
                        area: data
                    })
                    area.innerHTML = html;
                }
            })
        }
    </script>
</body>

</html>